<template>
  <div>
    <section class="company-box">
      <h6>财务状况</h6>
      <p>根据申请需要，请按照提示准确的填写下列列表信息。</p>
      <apply-item leftText="2016销售额" companyText="万元" :onErrorTips="sales2016ErrText">
        <input type="tel" placeholder="请输入数字（若无请填0）" slot="middledom" maxlength="10" @blur="onBlur('sales2016')" @input="inputNum('sales2016')" v-model="applyForm.sales2016">
      </apply-item>
      <apply-item leftText="2017销售额" companyText="万元" :onErrorTips="sales2017ErrText">
        <input type="tel" placeholder="请输入数字（若无请填0）" slot="middledom" maxlength="10" @blur="onBlur('sales2017')" @input="inputNum('sales2017')" v-model="applyForm.sales2017">
      </apply-item>
      <apply-item leftText="2018销售额" companyText="万元" :onErrorTips="sales2018ErrText">
        <input type="tel" placeholder="请输入数字（若无请填0）" slot="middledom" maxlength="10" @blur="onBlur('sales2018')" @input="inputNum('sales2018')" v-model="applyForm.sales2018">
      </apply-item>
    </section>
    <section class="company-box">
      <h6>联系方式</h6>
      <p>根据申请需要，请按照提示准确的填写下列列表信息。</p>
      <apply-item leftText="负责人" :onErrorTips="custodianErrText">
        <input type="text" placeholder="请输入负责人姓名" slot="middledom" maxlength="15" @blur="onBlur('custodian')" @input="inputName('custodian')" v-model="applyForm.custodian">
      </apply-item>
      <apply-item leftText="职务" :onErrorTips="positionErrText">
        <input type="text" placeholder="请输入负责人的职务" slot="middledom" maxlength="15" @blur="onBlur('position')" @input="inputName('position')" v-model="applyForm.position">
      </apply-item>
      <apply-item leftText="电话" :onErrorTips="dianhuaErrText">
        <input type="tel" placeholder="请输入电话号码" slot="middledom" maxlength="12" @blur="onBlur('dianhua')" @input="inputPhone" v-model="applyForm.dianhua">
      </apply-item>
      <apply-item leftText="传真" :onErrorTips="faxErrText">
        <input type="text" placeholder="请输入传真" slot="middledom" maxlength="12" @blur="onBlur('fax')" @input="inputNum('fax')" v-model="applyForm.fax" v-inputBlur>
      </apply-item>
      <apply-item leftText="邮箱" :onErrorTips="emailErrText">
        <input type="email" placeholder="请输入邮箱" slot="middledom" @blur="onBlur('email')" v-model="applyForm.email" v-inputBlur>
      </apply-item>
    </section>
    <section class="ordinary-box">
      <apply-item leftText="手机号" :onErrorTips="telErrText">
        <input type="tel" placeholder="请输入手机号" slot="middledom" @input="inputNum('tel')" maxlength="11" @blur="onBlur('tel')" v-model="applyForm.tel" v-inputBlur>
      </apply-item>
      <apply-item v-show="codeShow" leftText="验证码" :borderShow="false" :rightCode="true">
        <input type="text" placeholder="请输入验证码" slot="middledom" maxlength="4" v-model="imgcode" v-inputBlur>
        <div class="img-box" slot="rightdom" @click="getRandom(10)">
          <img :src="imgCodeUrl" alt="图片验证码">
        </div>
      </apply-item>
      <div class="change-img" v-show="codeShow">
        <span @click="getRandom(10)">看不清，换一张</span>
      </div>
    </section>
    <section class="ordinary-box">
      <apply-item leftText="短信验证码" :rightCode="true">
        <input type="tel" placeholder="请输入短信验证码" slot="middledom" maxlength="6" @blur="onBlur('verify')" v-model="applyForm.verify" v-inputBlur>
        <div class="img-box" slot="rightdom" @click="checkImageCode">
          <span>{{codeText}}</span>
        </div>
      </apply-item>
      <div class="verify-text">
        <span class="error" v-show="verifyText"></span>
        <span>{{verifyText}}</span>
      </div>
    </section>
  </div>
</template>
<script>
import ApplyItem from './ApplyItem'
import consts from '../../../common/consts'
import { isvalidEmail, isvalidPhone, isvalidTelephone, isvalidFax } from '../../../common/validate'
import { nameRule, addressRule, numRule, phoneRule } from '../../../common/inputRule'
export default {
  components: {
    ApplyItem
  },
  data() {
    return {
      applyForm: {
        sales2016: null,
        sales2017: null,
        sales2018: null,
        custodian: null,
        position: null,
        dianhua: null,
        fax: null,
        email: null,
        tel: null,
        verify: null,
        auType: 2
      },
      sales2016ErrText: '',
      sales2017ErrText: '',
      sales2018ErrText: '',
      custodianErrText: '',
      positionErrText: '',
      dianhuaErrText: '',
      faxErrText: '',
      emailErrText: '',
      telErrText: '',
      verifyText: '',
      random: null,
      imgCodeUrl: null,
      imgcode: null,
      codeShow: false,
      countDown: -1,
      codeTimer: null,
      checkTelFlag: false, // 校验标志位
      checkFaxFlag: false, // 校验标志位
      checkEmailFlag: false, // 校验标志位
      checkPhoneFlag: false // 校验标志位
    }
  },
  computed: {
    codeText() {
      if (this.countDown === -1) {
        return '获取验证码'
      }
      if (this.countDown === 0) {
        return '重新获取验证码'
      } else {
        return this.countDown + '秒后重新获取'
      }
    }
  },
  mounted() {
    // this.getRandom(10)
  },
  methods: {
    submit() {
      if (!this.applyForm.sales2016) {
        this.sales2016ErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.sales2017) {
        this.sales2017ErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.sales2018) {
        this.sales2018ErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.custodian) {
        this.custodianErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.position) {
        this.positionErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.dianhua) {
        this.dianhuaErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.fax) {
        this.faxErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.email) {
        this.emailErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.tel) {
        this.telErrText = '必填项'
        this.$emit('onErrShow', true)
      }
      if (!this.applyForm.verify) {
        this.verifyText = '请输入正确的短信验证码'
        this.$emit('onErrShow', true)
      }
      // 有一项格式不正确，return
      if (this.checkTelFlag || this.checkFaxFlag || this.checkEmailFlag || this.checkPhoneFlag) {
        this.$emit('onErrShow', true)
        return
      }
      // 校验短信验证码
      this.verifSms()
    },
    // 提交数据
    createCertificate() {
      let params = this.initParams()
      this.$showLoading()
      this.$api.createCertificate(this.$route.query.catid, params).then(data => {
        this.$hideLoading()
        if (data.data.status == 1) {
          this.$router.replace("/applyRewardSuccess/?catid=" + this.$route.query.catid)
          window.sessionStorage.removeItem('brandFrom')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 初始化提交数据
    initParams() {
      let applyFormOne = JSON.parse(window.sessionStorage.getItem('applyForm'))
      let params = {
        action: "m_create_certificate_post",
        company: applyFormOne.companyName,
        title: applyFormOne.title,
        faren: applyFormOne.faren,
        homepage: applyFormOne.homepage,
        address: applyFormOne.address,
        founding_time: applyFormOne.founding_time,
        registered_fund: applyFormOne.registered_fund,
        fixed_assets: applyFormOne.fixed_assets,
        invent_patent: applyFormOne.invent_patent,
        design_patent: applyFormOne.design_patent,
        practical_patent: applyFormOne.practical_patent,
        sales2016: this.applyForm.sales2016,
        sales2017: this.applyForm.sales2017,
        sales2018: this.applyForm.sales2018,
        custodian: this.applyForm.custodian,
        position: this.applyForm.position,
        dianhua: this.applyForm.dianhua,
        fax: this.applyForm.fax,
        email: this.applyForm.email,
        tel: this.applyForm.tel,
        verify: this.applyForm.verify,
        auType: 2
      }
      return params
    },
    // 获取图片验证码
    getImgCode(random) {
      this.imgCodeUrl = 'http://' + consts.domain + '/api/captchas.sms.png.php?rnd=' + random + '&auType=2'
    },
    // 获取指定位数随机数
    getRandom(num) {
      this.random = Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, num - 1))
      // 获取验证码
      this.getImgCode(this.random)
    },
    // 校验图片验证码
    checkImageCode() {
      if (!this.applyForm.tel) return this.telErrText = '必填项'
      if (this.checkPhoneFlag) return
      if (!this.codeShow) {
        this.getRandom(10)
        this.codeShow = true
        return
      }
      if (this.countDown <= 0) {
        if (!this.imgcode) {
          this.$toast.center('请填写图片验证码')
          return
        }
        // 图片验证码检验
        this.$api.checkImageCodeBrand({
          rnd: this.random,
          captcha: this.imgcode,
          auType: 2
        }).then(data => {
          if (data.data.status == 0) {
            this.$emit('onMsgText', data.data.msg)
            this.imgcode = ''
            this.getRandom(10)
          } else {
            // 获取短信码
            this.getSms()
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 获取短信码
    getSms() {
      this.$api.getSms(this.$route.query.catid, {
        action: 'm_sms_verif_post',
        auType: '2',
        tel: this.applyForm.tel,
        captcha: this.imgcode,
        rnd: this.random
      }).then(data => {
        if (data.data.status == 1) {
          this.time()
        } else {
          this.$emit('onMsgText', data.data.msg)
          this.imgcode = ''
          this.getRandom(10)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 校验短信验证码
    verifSms() {
      this.$api.getVerifSms(this.$route.query.catid, {
        tel: this.applyForm.tel,
        verify: this.applyForm.verify,
        auType: 2
      }).then(data => {
        if (data.data.status == 1) {
          // 提交数据
          this.createCertificate()
        } else {
          this.verifyText = data.data.msg
          this.$emit('onMsgText', data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 验证码倒计时
    time() {
      clearInterval(this.codeTimer)
      this.countDown = 60
      this.codeTimer = setInterval(() => {
        this.countDown--
        if (this.countDown <= 0) {
          this.countDown = 0
          clearInterval(this.codeTimer)
        }
      }, 1000)
    },
    // 校验
    onBlur(e) {
      if (e == 'sales2016') {
        if (!this.applyForm.sales2016) {
          this.sales2016ErrText = '必填项'
        } else {
          this.sales2016ErrText = ''
        }
      }
      if (e == 'sales2017') {
        if (!this.applyForm.sales2017) {
          this.sales2017ErrText = '必填项'
        } else {
          this.sales2017ErrText = ''
        }
      }
      if (e == 'sales2018') {
        if (!this.applyForm.sales2018) {
          this.sales2018ErrText = '必填项'
        } else {
          this.sales2018ErrText = ''
        }
      }
      if (e == 'custodian') {
        if (!this.applyForm.custodian) {
          this.custodianErrText = '必填项'
        } else {
          this.custodianErrText = ''
        }
      }
      if (e == 'position') {
        if (!this.applyForm.position) {
          this.positionErrText = '必填项'
        } else {
          this.positionErrText = ''
        }
      }
      if (e == 'dianhua') {
        if (!this.applyForm.dianhua) {
          this.dianhuaErrText = '必填项'
        } else {
          if (!isvalidTelephone(this.applyForm.dianhua)) {
            this.dianhuaErrText = '电话有误'
            this.checkTelFlag = true
            return
          } else {
            this.dianhuaErrText = ''
            this.checkTelFlag = false
          }
        }
      }
      if (e == 'fax') {
        if (!this.applyForm.fax) {
          this.faxErrText = '必填项'
        } else {
          if (!isvalidFax(this.applyForm.fax)) {
            this.faxErrText = '格式有误'
            this.checkFaxFlag = true
            return
          } else {
            this.faxErrText = ''
            this.checkFaxFlag = false
          }
        }
      }
      if (e == 'email') {
        if (!this.applyForm.email) {
          this.emailErrText = '必填项'
        } else {
          if (!isvalidEmail(this.applyForm.email)) {
            this.emailErrText = '邮箱有误'
            this.checkEmailFlag = true
          } else {
            this.emailErrText = ''
            this.checkEmailFlag = false
          }
        }
      }
      if (e == 'tel') {
        if (!this.applyForm.tel) {
          this.telErrText = '必填项'
        } else {
          if (!isvalidPhone(this.applyForm.tel)) {
            this.telErrText = '手机号有误'
            this.checkPhoneFlag = true
          } else {
            this.telErrText = ''
            this.checkPhoneFlag = false
          }
        }
      }
      if (e == 'verify') {
        if (!this.applyForm.verify || this.applyForm.verify.length != 6) {
          this.verifyText = '请输入正确的短信验证码'
        } else {
          this.verifyText = ''
        }
      }
    },
    inputNum(e) {
      if (e == 'sales2016') {
        this.applyForm.sales2016 = numRule(this.applyForm.sales2016)
      }
      if (e == 'sales2017') {
        this.applyForm.sales2017 = numRule(this.applyForm.sales2017)
      }
      if (e == 'sales2018') {
        this.applyForm.sales2018 = numRule(this.applyForm.sales2018)
      }
      if (e == 'tel') {
        this.applyForm.tel = numRule(this.applyForm.tel)
      }
      if (e == 'fax') {
        if (this.applyForm.fax.length > 12) {
          this.applyForm.fax = this.applyForm.fax.slice(0, 12)
        }
        this.applyForm.fax = phoneRule(this.applyForm.fax)
      }
    },
    inputName(e) {
      if (e == 'custodian') {
        this.applyForm.custodian = nameRule(this.applyForm.custodian)
      }
      if (e == 'position') {
        this.applyForm.position = nameRule(this.applyForm.position)
      }
    },
    inputPhone() {
      this.applyForm.dianhua = phoneRule(this.applyForm.dianhua)
    }
  }
}
</script>
<style lang='scss' scoped>
.company-box {
  background: #fff;
  padding: 0.3rem 0.3rem 0 0.3rem;
  margin-bottom: 0.2rem;
  h6 {
    font-size: 0.34rem;
    line-height: 0.34rem;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    padding: 0.3rem 0;
  }
  p {
    font-size: 0.24rem;
    line-height: 0.3rem;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 0.26rem;
  }
}
.ordinary-box {
  background: #fff;
  padding: 0 0.3rem;
  margin-bottom: 0.2rem;
  .img-box {
    width: 100%;
    border-left: 1px solid rgba(246, 246, 246, 1);
    span {
      color: #739efb;
    }
    img {
      width: 1.6rem;
      height: 0.68rem;
    }
  }
  .change-img {
    text-align: right;
    span {
      font-size: 0.24rem;
      line-height: 0.6rem;
      font-weight: 500;
      color: rgba(115, 158, 251, 1);
    }
  }
  .verify-text {
    min-height: 0.34rem;
    margin: 0.1rem 0;
    span {
      font-size: 0.24rem;
      color: #ff3131;
    }
    .error {
      display: inline-block;
      vertical-align: bottom;
      margin-right: 0.12rem;
      width: 0.25rem;
      height: 0.25rem;
      background: url(../../../assets/img/error.png) center no-repeat;
      background-size: cover;
    }
  }
}
</style>
